Ceaser CSS Easing Animation Tool

Choose an easing type and test it out with a few effects.
If you don’t quite like the easing, grab a handle and fix it.
When you’re happy, snag your code and off you go.

Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

*If you are anything like me, we should be friends @matthewlein

Time

Animation (%)

Easing: Duration: Effect:

Code snippets, short and long-hand:

If this saves you time, or blows your mind, consider making a donation to keep these projects alive.

Resources

Very nice overview of CSS Transitions and Animation: http://css3.bradshawenterprises.com/
Jared Hardy’s Ceaser Compass extension: https://github.com/jhardy/compass-ceaser-easing
Excellent CSS3 LESS mixin by Matthew Wagerfield: https://github.com/MatthewWagerfield/LESS-CSS3-Mixins
Ceaser TextMate Bundle: https://github.com/matthewlein/Ceaser-CSS-Easing-tmbundle
LESS easing by Kirk Strobeck https://github.com/kirkstrobeck/bootstrap/blob/master/less/easing.less
Ceaser cubic bezier’s in JS/LESS/SASS for plugin/mixin developers
AppMobi did a simple how-to video for Ceaser on Youtube
-ms- prefix was never really needed

Webkit/Safari/Chrome desicion-makers: Hoping Bug 45761 gets fixed/implemented soon so I can add easeBack effects.

Let the good times roll!